﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.3.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="signalr/hubs"></script>
    <script>
        $(function () {
            var nlog = $.connection.loggingHub;
            nlog.client.log = function (logEvent) {
                writeLog(logEvent.Message, logEvent.Level, logEvent.TimeStamp);
            };

            $.connection.hub.start().done(function () {
                writeLog("Logging connected", "Info", new Date().toISOString())
            });
        })

        function writeLog(text, level, timestamp) {
            var tr = $("<tr>");
            tr.append($("<td>").text(timestamp));
            tr.append($("<td class='" + level.toLowerCase() + "'>").text(level));
            tr.append($("<td style='white-space: pre;'>").text(text));
            $("#logTableHead").after(tr);
        }
    </script>
    <style>
        .info
        {
            background-color: lightgray;
        }

        .debug
        {
            background-color: orange;
        }

        .error
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Log Viewer</h1>
        <div>
            <table id="logTable">
                <tr id="logTableHead">
                    <th>Timestamp</th>
                    <th>Level</th>
                    <th>Message</th>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
